<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/igrid/customEditor.js" charset="utf-8"></script>
<style type="text/css">
h5{font-size: 13px; font-weight: normal; line-height: 13px; float: right;}
h6{font-size: 13px; color: red; float: left; line-height: 13px;}
.showClew{font-size: 12px; color: olive;}
.showClew span{color: peru;}
.spanShow{color: peru;}
</style>
<div id="customEditorDemo">
	
	<!-- Demo区 -->
	<div title='customEditor' tabid='tab2'>
        <span class="showClew">备注：</span><br><br>
		<div class="ccay-grid-toolbar">
	 		<input onclick="Ccay.example.ui.igird.customEditor.operateTest($('#grdEditor').manager().getSelectedRecords());" value='get selected records' type='button' />	
			<input onclick="Ccay.example.ui.igird.customEditor.operateTest($('#grdEditor').manager().getUpdatedRecords());" value='get updated records' type='button' />		   
	 	</div>
	 	<div id="grdEditor"></div>
    	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
			<pre id='html1'>
&lt;div id="customEditorDemo1">
	&lt;div title='customEditor' tabid='tab2'>
        &lt;span class="showClew">备注：&lt;/span>&lt;br>&lt;br>
			&lt;div class="ccay-grid-toolbar">
	 			&lt;input onclick="Ccay.example.ui.igird.customEditor.operateTest($('#grdEditorDemo').manager().getSelectedRecords());" value='get selected records' type='button' />	
				&lt;input onclick="Ccay.example.ui.igird.customEditor.operateTest($('#grdEditorDemo').manager().getUpdatedRecords());" value='get updated records' type='button' />		   
	 		&lt;/div>
	 	&lt;div id="grdEditorDemo">&lt;/div>
	&lt;/div>
&lt;/div>
			</pre>
		</div>
		<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js1'>
	var arrayAttr3 = ["降级", "降薪", "饱和配股数", "饱和配股资格第1次", "饱和配股资格第2次", "罚款", "其他"];
	var renderAttr5 = function (field, noDisabled) {
		var html = [], fieldArray = field && field.split(",");
		$.each(arrayAttr3, function (d, data) {
			var isChecked;
			if (fieldArray) {
				$.each(fieldArray, function (r, record) {
					if (d + 1 == record) {
						isChecked = "checked='true'";
						return false;
					}
				});
			}
			html.push("&lt;input type='checkbox' value='{3}' {2} {1} />&lt;span>{0}&lt;/span>&lt;br>".formatText(data, !noDisabled ? "disabled='true'" : "", isChecked || "", (d + 1)));
		});
		return html.join("");
	};
	var renderAttr6 = function (field, isInput) {
		var html = [], fieldArray = field && field.split(";");
		for (var i = 1, len = arrayAttr3.length; i <= len; i++) {
			if (fieldArray) {
				var inputText;
				$.each(fieldArray, function (r, record) {
					recordArray = record.split(":");
					if (i == recordArray[0]) {
						inputText = recordArray[1];
						return false;
					} else {
						inputText = "";
					}
				});
				html.push("&lt;span val='{1}'>{0}&lt;/span>&lt;br>".formatText(inputText, i));
			}
			if (isInput) {
				html.push("&lt;input id='txtEditor{0}' type='text' val='{0}'/>&lt;br>".formatText(i));
			}
		}
		return html.join("");
	};
	var datas = [
		{"attr1": "ww", "attr2": "wwwwww", "attr3": null, "attr4": null},
		{"attr1": "ww", "attr2": "wwwwww", "attr3": "1", "attr4": "1:ww"},
		{"attr1": "ww", "attr2": "wwwwww", "attr3": "2,4", "attr4": "2:ww;4:ee"},
		{"attr1": "ww", "attr2": "wwwwww", "attr3": "2,5,6", "attr4": "2:ww;5:ee;6:ee"},
		{"attr1": "ww", "attr2": "wwwwww", "attr3": "1,2,3,4", "attr4": "1:ww;2:ee;3:ww;4:ee"}
		],
		
	renderAttr3 = {
			getFormat : function(field, format) {
			return "${#Ccay.example.ui.igird.customEditor.renderAttr3({0})}".formatText(field);
			},
			getValue : function(target, format) {
				var inputText = [];
				target.children("input").each(function (i, checkbox) {
					if (checkbox.checked) {
						inputText.push(checkbox.value);
					}
				});
				return inputText.join(",");
			},
			format : function(value, format) {
				return renderAttr3(value);
			},
			render : function(target, value, format) {
				target.html(this.format(value, format));
			}
		},
		editorAttr3 = {
			build : function(container, op) {
				var ctr = $.create("div").width(200).appendTo(container);
				ctr.html(renderAttr5(null, true));
				ctr.children("input").change(function (e) {
					var curTarget = e.currentTarget,
						txtTarget = $("#txtEditor" + curTarget.value);
					if (curTarget.checked) {
						txtTarget.removeAttr("disabled");
					} else {
						txtTarget.val("");
						txtTarget.attr("disabled", true);
					}
				});
				return ctr;	
			},
			setValue : function(ctr, value) {
				var valueArray = value && value.split(",");
				if (valueArray) {
					ctr.children("input").each(function (i, checkbox) {
						$.each(valueArray, function (v, val) {
							if (val == checkbox.value) {
								checkbox.checked = true;
								valueArray.shift();
								return false;
							}
						});
					});
				}
			},
			getValue : function(ctr) {
				var ctrValue = [];
				ctr.children("input").each(function (i, checkbox) {
					if (checkbox.checked) {
						ctrValue.push(checkbox.value);
						checkbox.checked = false;
					}
				});
				return ctrValue.join(",");
			}
		},
		renderAttr4 = {
			getFormat : function(field, format) {
				return "${#Ccay.example.ui.igird.customEditor.renderAttr4({0})}".formatText(field);
			},
			getValue : function(target, format) {
				var inputText = [], spanDom;
				target.children("span").each(function (i, spantext) {
					spanDom = $(spantext);
					if (spanDom.text()) {
						inputText.push(spanDom.attr("val") + ":" + spanDom.text());
					}
				});
				return inputText.join(";");
			},
			format : function(value, format) {
				return renderAttr4(value);
			},
			render : function(target, value, format) {
				target.html(this.format(value, format));
			}
		},
		editorAttr4 = {
			build : function(container, op) {
				var ctr = $.create("div").width(200).appendTo(container);
				ctr.html(renderAttr6(null, true));
				return ctr;	
			},
			setValue : function(ctr, value) {
				var valueArray = value && value.split(";"), dataArray, isHasValue, inputDom;
				ctr.children("input").each(function (i, inputtext) {
					inputDom = $(inputtext);
					isHasValue = false;
					if (valueArray) {
						$.each(valueArray, function (d, data) {
							dataArray = data.split(":");
							if (inputDom.attr("val") == dataArray[0]) {
								inputDom.val(dataArray[1]);
								valueArray.shift();
								isHasValue = true;
								return false;
							}
						});
					}
					!isHasValue && inputDom.attr("disabled", true);
				});
			},
			getValue : function(ctr) {
				var ctrValue = [], inputDom;
				ctr.children("input").each(function (i, inputtext) {
					inputDom = $(inputtext);
					if (inputDom.val()) {
						ctrValue.push(inputDom.attr("val") + ":" + inputDom.val());
						inputDom.val("");
					} else {
						inputDom.removeAttr("disabled");
					}
				});
				return ctrValue.join(";");
			}
		},
		gridOption = {
			height: 500,
			editMode: true,
			rowEdit: true,
			wrap: true,
			columns: [
				{columnType: "select", multi: true, freezeable: true},
		 		{field: "attr1", width:100, header: "Attr1"},
		 		{field: "attr2", width:150, header: "Attr2", type: "longtext"},
		 		{field: "attr3", width:200, header: "Attr3", renderer: Ccay.UI.Renderer.create(renderAttr3), editor: Ccay.Editor.create(editorAttr3)},
		 		{field: "attr4", width:200, header: "Attr4", renderer: Ccay.UI.Renderer.create(renderAttr4), editor: Ccay.Editor.create(editorAttr4)}
		    ]
		};
		
		$S("#grdEditorDemo").igrid(gridOption, datas);
		
		
      		</pre>
      	</div>
      	<div class="try">
			<a onclick="Ccay.example.openTry('#customEditorDemo',$('#js1').html(),$('#html1').html())">亲自试一试</a>
		</div>	
    </div>
    
    <!-- Try区 -->
	 <div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:300px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:300px; width:99%;">
	                      </textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	 
	 <!-- FAQ区 -->
	 <div title="FAQ">
		  <form class="init ccay-form">
		    <div class="ccay-form-body">
		    <ul>
		    	<li class="ccay-form-row">
			      <samp><h3>问题</h3></samp>
			      <span class="ccay-form-input">
			               <h3>解决方案</h3>
			      </span>
			    </li>
		    </ul>
			</div>     
			<div class="ccay-form-custom">
			    <ul>                     
			        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
			        <li class="ccay-form-row">
			                          <samp class="i18n" i18nKey=""></samp>                          
			                         <span class="ccay-form-input"></span>
			        </li>  
			    </ul>
			</div>
		  </form>                    
    </div> 
</div>